案例:实验项目-手机APP屏幕时间数据
品牌:微信
技术实现: html5
亮点:
微信推出的查看用户在每个APP上花了多少时间的H5作品,以此对自己使用手机APP的情况做一个总结和了解。
进入作品后,每个APP标志都在一个小泡泡中,用户可滑动屏幕随意改变泡泡位置,点击小泡泡后,进入时间显示页面,页面上侧是软件泡泡,中间是APP使用时长,一个横线代表时间,软件会在符合时间长短的位置下陷并显示具体数字,用户在此界面可更换APP的名字,也可点击屏幕下侧其他APP标志查看使用时长,或点击上侧空白处返回后,继续点击其他泡泡。
黑色的背景上是大小不一的泡泡,不是静止不动的,就像真的泡泡那样互相挤在一起,还有因碰撞产生略微的弹动,下沉和变形,看起来很有趣不呆板。
用户可滑动屏幕改变泡泡位置,所有泡泡都会因一个泡泡的挪动而产生稍微的弹动,但每个APP的泡泡大小不会随着位置产生改变,在详情页面,用户可改变APP名字,点击直接查看其他APP使用时长,也可返回泡泡界面随意选择。